<template>
  <el-input v-model="query" style="width: 20%"></el-input>
  <el-button @click="searchUser" type="primary">资料检索</el-button><br>
  <el-table :data="tableData" style="width: 100%" >
    <el-table-column prop="worksId" label="被举报作品号" width="150" />
    <el-table-column prop="reportedAdmin" label="被举报人账户" width="150" />
    <el-table-column prop="reportedName" label="被举报人姓名" width="150" />
    <el-table-column prop="reporterAdmin" label="举报人账户"  width="150"/>
    <el-table-column prop="reporterName" label="举报人姓名" width="150" />
    <el-table-column prop="reportCause" label="举报原因" width="150" />
    <el-table-column prop="reportType" label="举报类型" width="150" />
    <el-table-column align="right">

      <template #default="scope">
        <el-button size="small"
                   type="warning"
                   @click="sendRequest(scope.$index, scope.row)"
        >警告</el-button
        >
        <el-button
            type="danger"
            size="small"
            @click="suspend(scope.$index)">
          封号
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "ReportView",
  data(){
    return{
      tableData:'',
      query:''
    }
  },
  created() {
    const _this=this
    axios({
      method: 'post',
      url: 'http://localhost:8081/showReport',
      params: {}
    })
        .then(function (response) {

          console.log(response)
          _this.tableData = response.data

        })
        .catch(function (error) {
          console.log(error);
        });
  },
  methods:{
    searchUser(){
      const _this=this
      axios({
        method: 'post',
        url: 'http://localhost:8081/flexibleQueryUser',
        params: {
          query:this.query
        }
      })
          .then(function (response) {

            console.log(response)
            _this.tableData = response.data

          })
          .catch(function (error) {
            console.log(error);
          });
    },
    suspend(index){
      /*  if(this.button_title=="封号"){
          this.button_title="解封";
        }else {
          this.button_title="";
        }*/
      const isSuspend =confirm("将对发送者账号封禁，请谨慎操作")
      if(isSuspend){
        ElMessage({
          message:"封号成功",
          type:"success"
        })
        axios({
          method: 'post',
          url: 'http://localhost:8081/suspendUser',
          params: {
            userName:this.tableData.at(index).userName
          }
        })
            .then(function (response) {

              console.log(response)

            })
            .catch(function (error) {
              console.log(error);
            });
      }
    }

  }
}
</script>

<style scoped>

</style>